<script setup>
import component1 from '@/components/1BASE/14component/component1.vue';
import component2 from '@/components/1BASE/14component/component2.vue';
import { ref } from 'vue'
 
const currentTab = ref('Home')

const tabs = {
    component1,
    component2
}
</script>

<template>
    <div class="demo">
        <button
            v-for="(_, tab) in tabs"
            :key="tab"
            @click="currentTab = tab"
        >
            {{ tab }}
        </button>
        <!-- 通过 Vue 的 <component> 元素和特殊的 is attribute 实现的 -->
        <component :is="tabs[currentTab]"></component>
    </div>
</template>